<template>
	<view class="order-item-box w100" @click="toDetail">
		<view class="order-top flex-row-center">
			<view class="name-box flex-row-center">
				<text class="text">订单：{{orderInfo.order}}</text>
				<up-icon name="order" color="#E4E4E5" size="28rpx" @click.stop="copyOrderId"></up-icon>
			</view>
			<template>
				<text class="status" v-if="orderInfo.status==0">待服务</text>
				<text class="status" v-else-if="orderInfo.status==1">待处理</text>
				<text class="status" v-else-if="orderInfo.status==2">已取消</text>
				<text class="status" v-else-if="orderInfo.status==3">服务中</text>
				<text class="status" v-else-if="orderInfo.status==4">已完成</text>
			</template>
		</view>
		<view class="order-content flex w100">
			<view class="order-img">
				<up-image :src="orderInfo.orderer_info?.avatar" width="118rpx" height="118rpx"
					radius="12rpx"></up-image>
			</view>
			<view class="content-info flex">
				<text class="name">{{orderInfo.orderer_info?.nickname}}</text>
				<text class="time">时间：{{orderInfo.order_start_time_text}}~{{orderInfo.order_end_time_text}}</text>
				<text class="price">￥{{orderInfo.real_amount}}</text>
			</view>
		</view>
		<!-- 操作 -->
		<template>
			<view class="order-btn flex-row-center w100" v-if="orderInfo.status==0">
				<view class="close-btn flex-center" @click.stop="closeOrder(orderInfo)">
					<text class="text">取消订单</text>
				</view>
				<view class="confim-btn flex-center" @click.stop="confimOrder(orderInfo)">
					<text class="text">接收订单</text>
				</view>
			</view>
			<view class="order-btn flex-row-center w100" v-else-if="orderInfo.status==1">
				<view class="close-btn flex-center" @click.stop="closeOrder(orderInfo)">
					<text class="text">取消订单</text>
				</view>
				<view class="confim-btn flex-center" @click.stop="StartOrder(orderInfo)">
					<text class="text">开始订单</text>
				</view>
			</view>
			<view class="order-btn flex-row-center w100" v-else-if="orderInfo.status==3">
				<view class="confim-btn flex-center" @click.stop="endOrder(orderInfo)">
					<text class="text">结束订单</text>
				</view>
			</view>
		</template>

	</view>
</template>

<script setup>
	import {
		isMillisecondTimestamp,
	} from '@/utils/utools.js';
	import {
		assistantStore
	} from '../../stores/assistant';
	import {
		userInfoStore
	} from '@/stores/user';
	const userStore = userInfoStore()
	const assistantStoreInfo = assistantStore()
	const props = defineProps({
		orderInfo: {
			default: {}
		},
		status: {
			default: 0
		}
	})
	const orderInfo = ref(computed(() => props.orderInfo));
	const orderStatus = ref(computed(() => props.status));
	const emit = defineEmits(['closeList']);
	const confimOrder = (item) => { //确认订单
		uni.showModal({
			title: '提示',
			content: '确认接受此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.confimOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '接受成功！'
						})
						emit('closeList', {
							status: item.status,
							id: item.id
						})
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	const closeOrder = (item) => { //取消订单
		uni.showModal({
			title: '提示',
			content: '确认取消此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.refundOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '取消成功！'
						})
						emit('closeList', {
							status: item.status,
							id: item.id
						})
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	const StartOrder = (item) => {
		if (item.order_start_time) {
			let start_date = item.order_start_time;
			let startDate = isMillisecondTimestamp(start_date) ? start_date : start_date * 1000;
			const timestamp = new Date().valueOf(); //当前毫秒级时间戳
			if (startDate > timestamp) {
				uni.$u.toast('还未到预约时间，无法开始')
				return
			}
		}
		uni.showModal({
			title: '提示',
			content: '确认开始此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.startOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '接受成功！'
						})
						emit('closeList', {
							status: item.status,
							id: item.id
						})
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const endOrder = (item) => {
		uni.showModal({
			title: '提示',
			content: '确认结束此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.endOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '结束成功！'
						})
						emit('closeList', {
							status: item.status,
							id: item.id
						})
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	const copyOrderId = (item) => {
		uni.setClipboardData({
			data: orderInfo.value.order,
			success: function() {
				uni.$u.toast('复制成功');
			}
		});

	}
	const toDetail = (info) => {
		assistantStoreInfo.setAssistantOrder(orderInfo.value);
		uni.navigateTo({
			url: '/page_assistant/views/userOrderDetails'
		})
	}
</script>

<style lang="scss" scoped>
	view {
		// border: 1rpx solid red;
	}

	.order-item-box {
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 20rpx 6rpx rgba(108, 199, 190, 0.38);

		.order-top {
			justify-content: space-between;
			font-size: 28rpx;

			.name-box {
				width: 70%;
			}

			.text {
				display: block;
				color: $name-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
				margin-right: 8rpx;
			}

			.status {
				color: #66DEC2;
			}
		}
	}

	.order-content {
		margin: 24rpx 0;

		.order-img {
			margin-right: 16rpx;
		}

		.content-info {
			flex: 1;
			flex-direction: column;

			.name {
				color: $name-color;
				font-size: 28rpx;
				font-weight: bold;
			}

			.time {
				color: $description-color;
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-bottom: 12rpx;
			}

			.price {
				color: $price-color;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.order-btn {
		justify-content: flex-end;

		.close-btn {
			width: 160rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid $noActive-text-color;
			color: $noActive-text-color;
			font-size: 24rpx;
			box-sizing: border-box;
			margin-right: 20rpx;
		}

		.confim-btn {
			width: 160rpx;
			height: 48rpx;
			border-radius: 24rpx;
			background: $btn-bg-color;
			color: $btn-text-color;
			font-size: 24rpx;
		}
	}
</style>